<!--
 @author: zgg (作者)
 @create: 2021-08-30 更改日期
   -->
<template>
  <div class="app-container">
    <div class="admin-box">
      <div class="admin-top">
        <div class="admin-title">添加/修改管理员</div>
        <el-button type="primary" size="mini" @click="resetPass">重置密码</el-button>
        <el-button type="danger" size="mini" @click="delUser">删除用户</el-button>
      </div>
      <div class="upd-user-form-div">
        <!-- size用于控制该表单内组件的尺寸值为medium / small / mini -->
        <el-form ref="form" :model="form" :label-position="labelPosition" label-width="100px" style="width:500px;">
          <el-form-item label="用户头像">
            <div v-if="!form.image" class="up-img" @click="upImg"><i class="el-icon-plus" /></div>
            <img v-else class="up-img" width="100%" :src="form.image + '?imageView2/1/w/150/h/150'" alt=""
              @click="upImg">
            <!-- <el-tag>用于登录显示头像，推荐上传尺寸100*100</el-tag> -->
          </el-form-item>
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" class="form-input" :readonly="true" placeholder="请输入账号" />
            <span style="font-size:15px;padding-left:10px;color:#999;">账号不可以修改</span>
          </el-form-item>
          <el-form-item label="真实姓名" prop="name">
            <el-input v-model="form.name" class="form-input" placeholder="请输入真实姓名" />
          </el-form-item>

          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="form.email" class="form-input" placeholder="请输入邮箱" />
          </el-form-item>
          <!-- <el-form-item label="社保卡号" prop="essc_no"> -->
          <!-- <el-input v-model="form.essc_no" class="form-input" placeholder="请输入社保卡号" /> -->
          </el-form-item>
          <el-form-item label="用户权限组" prop="role_ids">
            <el-checkbox-group v-model="form.role_ids" >
              <el-checkbox v-for="(item,index) in roles" :key="index" :label="item.id">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
         <!-- <el-form-item label="管理小区" prop="xiaoquIds">
            <el-select style="width: 600px;" multiple v-model="xiaoquIds" clearable filterable placeholder="请选择小区">
              <el-option v-for="(item,i) in xiaoquList" :key="i" :label="item.xq_name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="用户状态" prop="state">
            <el-switch v-model="form.state" class="upd-user-switch" inactive-color="#aaa" inactive-text="禁用"
              inactive-value="1" active-color="#5FB878" active-text="启用" active-value="0" :width="52"
              @change="change" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <!-- <router-link to="/admin/index">
              <el-button>返回</el-button>
            </router-link> -->
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import { validPhone, validEmail } from '@/utils/validate'
  import { save, getUserInfo, deleteUser, resetPass } from '@/api/admin-manage'
  // import { searchHouseList } from "@/api/house/index";

  export default {
    name: 'UpdUser',
    data() {
      return {
        form: {
          image: '', // 头像
          username: '', // 用户名
          password: '', // 密码
          name: '', // 真实姓名
          tel: '', // 电话
          email: '', // 邮箱
          // essc_no:'',//社保卡号
          state: '', // 启用状态(0启用，1禁用)
          role_ids: [] // 权限组id
        },
        id: '',
        checkRoles: [],
        roles: [],
        labelPosition: 'right', // label对齐方式，可选值为right、top、left
        xiaoquList: [],
        xiaoquIds: [],
      }
    },
    created() {
      this.id = this.$route.query.id
    },
    mounted() {
      this.getUser();
    },
    methods: {
      // 获取用户信息
      getUser() {
        getUserInfo({ id: this.id }).then(res => {
          if (res.state) {
			  console.log(res.data)
            this.roles = res.data.rolelist
            this.form.image = res.data.admin.headimg
            this.form.username = res.data.admin.username
            this.form.name = res.data.admin.name
            this.form.email = res.data.admin.email
            this.form.state = res.data.admin.state + ''
            this.form.role_ids = res.data.roleIds || []
          } else {
            this.$message.error(res.msg)
          }
        })
      },

      // 创建
      onSubmit() {
        if (!this.form.image) {
          this.$message.error('请选择用户头像!')
          return
        }
		if (!this.form.name) {
		  this.$message.error('真实姓名不能为空!')
		  return
		}
        if (!this.form.email) {
          this.$message.error('邮箱不能为空!')
          return
        }
        if (!validEmail(this.form.email)) {
          this.$message.error('请输入正确的邮箱!')
          return
        }
        if (this.form.role_ids.length === 0) {
          this.$message.error('请至少选择一个用户权限!')
          return
        }
        let data = {}
        data['admin.id'] = this.id
        data['admin.headimg'] = this.form.image
        data['admin.name'] = this.form.name
        data['admin.email'] = this.form.email
        data['admin.state'] = this.form.state
        data['role_id'] = (this.form.role_ids).join(',')
        this.saveUser(data)
      },

      // 保存用户信息函数
      saveUser(data) {
        save(data).then(res => {
          if (res.state) {
            this.$message({ message: '信息修改成功', type: 'success', duration: 2000 })
            setTimeout(() => {
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.push({ path: '/permission/admin' })
            }, 300)
          } else {
            this.$message.error(res.msg)
          }
        })
      },

      // 重置密码
      resetPass() {
        this.$confirm('您是否确认将这个用户的密码初始化为：123456 ?', '询问', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resetPass({ id: this.id }).then(res => {
            if (res.state) {
              this.$message({ message: '密码初始化成功', type: 'success', duration: 2000 })
            } else {
              this.$message.error(res.msg)
            }
          })
        }).catch(() => { })
      },

      // 删除用户
      delUser() {
        this.$confirm('您是否确定删除这个用户？', '询问', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUser({ id: this.id }).then(res => {
            if (res.state) {
              this.$message({ message: '删除成功', type: 'success', duration: 2000 })
              setTimeout(() => {
                this.$store.dispatch('tagsView/delView', this.$route)
                // this.$router.push({path:'/admin/index'})
                this.$router.push({ path: '/permission/admin' })
              }, 2000)
            } else {
              this.$message.error(res.msg)
            }
          })
        }).catch(() => { })
      },

      // 上传头像
      upImg() {
        // 上传单个文件
        this.hhFolder({
          max: 1,
          filter: 'image',
          thumb_w: 500,
          thumb_h: 250,
          success: files => {
            this.form.image = files[0].url;
          }
        });
      },

      // 返回页面
      back() {
        this.$store.dispatch('tagsView/delView', this.$route)
        // this.$router.push({path:'/admin/index'})
        this.$router.push({ path: '/permission/admin' })
      },

      // 状态改变
      change(val) {
        // console.log(val)
        this.form.state = val
      },

      // 权限选中
      handleCheckedChange(val) {
        this.form.role_ids = val
        // console.log(val)
      }

    }
  }
</script>

<style lang="scss" scoped>
  .admin-box {
    border: 1px solid #f2f2f2;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .12);
    background: #fff;

    .admin-top {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f2f2f2;

      .admin-title {
        font-size: 16px;
        color: #333;
        padding: 15px;
      }
    }

    .upd-user-form-div {
      padding: 16px 40px;

      .up-img {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 120px;
        height: 120px;
        cursor: pointer;
        line-height: 120px;
        vertical-align: top;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-icon-plus {
          font-size: 28px;
          color: #8c939d;
        }
      }

      .up-img:hover {
        border: 1px dashed #409eff;
      }

      .form-input {
        width: 220px;
      }
    }
  }
</style>

<style lang="scss">
  // element-ui样式修改
  .upd-user-form-div {
    label {
      font-weight: 500;
    }

    .el-form-item__label {
      font-size: 15px;
      color: #333;
    }
  }

  .upd-user-switch {
    .el-switch__label {
      position: absolute;
      display: none;
      color: #fff;
    }

    /*打开时文字位置设置*/
    .el-switch__label--right {
      z-index: 1;
      left: -6px;
    }

    /*关闭时文字位置设置*/
    .el-switch__label--left {
      z-index: 1;
      right: -5px;
    }

    /*显示文字*/
    .el-switch__label.is-active {
      display: block;
    }
  }
</style>